import G6 from "@antv/g6";
//定义数据源
const data = {
  //点集
  nodes: [
    {
      id: "node1",
      label: "Circle1",
      x: 150,
      y: 150
    },
    {
      //第二个图形的位置
      id: "node2",
      label: "Circle2",
      x: 300,
      y: 250
    }
  ],
  //边集
  edges: [
    //从第一条ode1连接到第二条node2的边
    {
      source: "node1",
      target: "node2"
    }
  ]
};
//创建G6图实例
const graph = new G6.Graph({
  container: "container", //指定画布的容器id
  //画布大小(宽高)
  width: 500,
  height: 500,
  defaultNode: {
    shape: "circle",
    size: [100], //圆形大小
    //边间距颜色
    color: "green",
    style: {
      //圆圈内背景颜色和边距
      fill: "blanck",
      lineWidth: 10
    },
    labelCfg: {
      //圆圈内字体颜色和大小
      style: {
        fill: "yellow",
        fontSize: 20
      }
    }
  },
  defaultEdge: {
    //连接的线条颜色
    style: {
      stroke: "red"
    }
  }
});
//读取数据
graph.data(data);
//渲染图
graph.render();


fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
  .then(res => res.json())
  .then(data => {
    const width = document.getElementById('container').scrollWidth;
    const height = document.getElementById('container').scrollHeight || 500;
    const graph = new G6.TreeGraph({
      container: 'container',
      width,
      height,
      modes: {
        default: [
          {
            type: 'collapse-expand',  //收起和展开 Combo
            // onChange：收起或展开的回调函数。警告：V3.1.2 版本中将移除；
            onChange: function onChange(item, collapsed) {
              const data = item.get('model').data; //当前被操作的节点
              data.collapsed = collapsed;  //当前操作是收起还是展开
              return true;
            },
          },
          'drag-canvas',  //拖拽画布
          'zoom-canvas',  //放缩画布
        ],
      },

//       graph.on('itemcollapsed', e => {
//   // 当前被操作的节点 item
//   console.log(e.item);
//   // 当前操作是收起（`true`）还是展开（`false`）
//   console.log(e.collapsed);
// })
      defaultNode: {
        size: 26,  //节点的大小
        anchorPoints: [  //指定边连入节点的连接点的位置（相对于该节点而言），可以为空
          [0, 0.5],
          [1, 0.5],
        ],
        style: {
          fill: '#C6E5FF', //文本颜色
          stroke: '#5B8FF9',
        },
      },
      defaultEdge: {
        //https://g6.antv.vision/zh/docs/manual/middle/elements/edges/defaultEdge
        type: 'cubic-horizontal', //cubic-horizontal：水平方向的三阶贝塞尔曲线，不考虑用户从外部传入的控制点；
        style: {
          stroke: '#A3B1BF', //边的颜色
        },
      },
      layout: {  //// Object，可选，布局的方法及其配置项，默认为 random 布局。
      // https://g6.antv.vision/zh/docs/manual/middle/layout#mindmap
        type: 'mindmap',  //脑图布局
        direction: 'H',  //layout 的方向。
// - H：horizontal（水平）—— 根节点的子节点分成两部分横向放置在根节点左右两侧
        getHeight: () => {
          return 16;  //节点高度的回调函数
        },
        getWidth: () => {
          return 16;  //节点宽度的回调函数
        },
        getVGap: () => {
          return 10; //节点纵向间距的回调函数
        },
        getHGap: () => {
          return 50;  //节点横向间距的回调函数
        },
      },
    });

    let centerX = 0;
//     使用 graph.node() https://g6.antv.vision/zh/docs/manual/middle/elements/nodes/defaultNode/#%E4%BD%BF%E7%94%A8-graphnode
// 该方法可以为不同节点进行不同的配置。
    graph.node(function(node) {
      console.log(node.id)
      if (node.id === 'Modeling Methods') {
        centerX = node.x;  //格式化node数据
      }

      return {
        label: node.id,
        // labelCfg Object 类型。配置标签文本。
        labelCfg: {
          // 文本相对于节点的位置
          // 配置文本标签：当有子节点的时候向左对齐，否则向右
          position:
            node.children && node.children.length > 0
              ? 'left'
              : node.x > centerX
              ? 'right'
              : 'left',
          offset: 5,
        },
      };
    });

    graph.data(data); //初始化的图数据，是一个包括 nodes 数组和 edges 数组的对象
    graph.render();
    graph.fitView();  //开启后图自动适配画布大小。
  });
